<template>
	<div class="index">
    <p class="p-head">当季鲜果</p>
    <div class="djxgbox">
      <img :src="comimgsrc+item.preview" class="img" v-for="item in djxglist" @click="freshto(item.id)">
    </div>
    <p class="p-head">限时抢购</p>
    <div class="limitbox">
      <div class="list" v-for="(item,index) in xsglist" @click="godetail(item.id)">
        <div class="djs">
          <djs @ievent="ievent($event)" v-bind:endtime="{sj:item.deadline,starttime:item.start_time,id:index,stock:item.stock}"></djs>
        </div>
        <img alt="" :src="comimgsrc+item.preview">
        <div class="down">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.price}}<span>/{{item.unit}}</span></p>
          <del class="m_price">原价:{{item.max_price}}<span>/{{item.unit}}</span></del>
        </div>
      </div>
    </div>
	</div>
</template>
<script>
import djs from '@/components/common/djs';
import qs from 'qs';

export default {
	name: 'index',
  	data () {
  		return{
        djxglist:[],
        xsglist:[],
        comimgsrc:'http://api.mountainfreshes.com'
  		}
  	},
  	methods:{
      freshto:function(id){
        this.$router.push({ name: 'freshDetail', query:{cpid: id} })
      },
      ievent(ev){
        this.sssid = ev.did;
        this.xsglist[ev.did].time = 0;
      },
      getdjxg:function(){
        this.$http.get("/index.php/index/goods/season")
        .then(res => {
          // console.log(res)
          this.djxglist = res.data.data;
          console.log(this.djxglist)
        })
        .catch(error => {
          
        });
      },
      getlimit:function(){
        this.$http.get("/index.php/index/goods/TimeLimitList")
        .then(res => {
          // console.log(res)
          this.xsglist = res.data;
          console.log(this.xsglist)
        })
        .catch(error => {
          
        });
      },
      godetail:function(id){
        this.$router.push({ name: 'limitDetail', query:{cpid: id} })
      }
  	},
  	components:{
      djs
  	},
  	mounted(){

    },
    created(){
      this.getlimit();
      this.getdjxg();
    },
    watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.path == '/limit'){
                  this.getlimit();
                  this.getdjxg();
                }
              }
        }
}
</script>
<style scoped lang="less">
.p-head{
  font-size: .26rem;
  color: #54b84c;
  padding: .2rem 0 0;
}
.djxgbox{
  width: 6rem;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  margin-top: .1rem;
  .img{
    display: block;
    width: 2.9rem;
    height: 3.4rem;
    float: left;
    margin-top: .2rem;
    margin-left: .2rem;
    &:nth-child(2n+1){
      margin-left: 0;
    }
  }
}
.limitbox{
  width: 6rem;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  margin-top: .14rem;
  .list{
    width: 2.9rem;
    height: 3.7rem;
    float: left;
    margin-top: .2rem;
    position: relative;
    .djs{
      width: 100%;
      height: .7rem;
      background: rgba(0,0,0,.6);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
    }
    &:nth-child(2n){
      margin-left: .2rem;
    }
    img{
      display: block;
      width: 2.9rem;
      height: 2.36rem;
    }
    .down{
      padding: 0 .1rem;
      height: 1.34rem;
      background: #eeeeee;
      .name{
        font-size: .24rem;
        color: #2a2a2a;
        text-align: center;
        padding-top: .12rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
        font-size: .36rem;
        color: #cf4040;
        text-align: center;
        span{
          font-size: .2rem;
          color: #383838;
        }
      }
      .m_price{
        color: #242424;
        font-size: .2rem;
      }
    }
  }
}
</style>